.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #f6f7fb;
}

.status-bar {
  background: #e54d42;
}

.custom-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx 32rpx;
  background: linear-gradient(135deg, #e54d42 0%, #ff7b6b 100%);
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;

  .navbar-left {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .brand {
      display: flex;
      align-items: center;
      gap: 12rpx;
    }

    .brand-name {
      font-size: 36rpx;
      font-weight: 600;
      letter-spacing: 2rpx;
    }

    .brand-badge {
      padding: 6rpx 16rpx;
      font-size: 22rpx;
      border-radius: 999rpx;
      border: 1rpx solid rgba(255, 255, 255, 0.5);
      background: rgba(255, 255, 255, 0.2);
    }

    .navbar-subtitle {
      margin-top: 6rpx;
      font-size: 24rpx;
      opacity: 0.8;
    }
  }

  .navbar-right {
    display: flex;
    align-items: center;
    gap: 16rpx;

    .nav-icon {
      width: 64rpx;
      height: 64rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 24rpx;
      background: rgba(255, 255, 255, 0.18);
      backdrop-filter: blur(12rpx);
    }
  }
}

.page-scroll {
  flex: 1;
}

.scroll-inner {
  padding: 32rpx 32rpx 160rpx;
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.hero-card {
  position: relative;
  padding: 48rpx;
  border-radius: 40rpx;
  background: linear-gradient(140deg, rgba(229, 77, 66, 0.95) 0%, rgba(255, 138, 115, 0.95) 80%);
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 32rpx;

  .hero-content {
    z-index: 1;

    .hero-label {
      font-size: 26rpx;
      letter-spacing: 4rpx;
      opacity: 0.8;
    }

    .hero-title {
      margin-top: 12rpx;
      font-size: 48rpx;
      font-weight: 600;
      line-height: 1.4;
    }

    .hero-desc {
      margin-top: 12rpx;
      font-size: 28rpx;
      line-height: 1.6;
      opacity: 0.9;
    }

    .hero-actions {
      margin-top: 32rpx;
      display: flex;
      gap: 24rpx;

      .hero-action {
        flex: 1;
        height: 80rpx;
        border-radius: 999rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        font-weight: 500;
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
        backdrop-filter: blur(6rpx);
      }

      .primary {
        background: #fff;
        color: #e54d42;
      }

      .ghost {
        border: 1rpx solid rgba(255, 255, 255, 0.4);
      }
    }
  }

  .hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24rpx;

    .metric-card {
      padding: 24rpx;
      border-radius: 28rpx;
      background: rgba(255, 255, 255, 0.18);
      backdrop-filter: blur(14rpx);
      display: flex;
      flex-direction: column;
      gap: 6rpx;

      .metric-label {
        font-size: 26rpx;
        opacity: 0.85;
      }

      .metric-value {
        font-size: 36rpx;
        font-weight: 600;
      }

      .metric-tip {
        font-size: 22rpx;
        opacity: 0.8;
      }
    }
  }
}

.section {
  background: #fff;
  border-radius: 32rpx;
  padding: 36rpx;
  box-shadow: 0 16rpx 60rpx rgba(229, 77, 66, 0.04);

  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32rpx;

    .section-title {
      font-size: 34rpx;
      font-weight: 600;
      color: #1d2129;

      .title-tag {
        margin-left: 12rpx;
        padding: 6rpx 16rpx;
        font-size: 22rpx;
        border-radius: 999rpx;
        background: rgba(229, 77, 66, 0.12);
        color: #e54d42;
      }

      .accent {
        background: rgba(255, 136, 102, 0.16);
        color: #ff6f5a;
      }

      .tertiary {
        background: rgba(124, 196, 255, 0.16);
        color: #3296fa;
      }
    }

    .section-subtitle {
      font-size: 26rpx;
      color: #86909c;
    }

    .section-link {
      font-size: 26rpx;
      color: #e54d42;
    }
  }
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28rpx;

  .quick-item {
    padding: 24rpx;
    border-radius: 28rpx;
    background: #f7f8fc;
    display: flex;
    flex-direction: column;
    gap: 12rpx;

    .quick-icon {
      width: 88rpx;
      height: 88rpx;
      border-radius: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .quick-title {
      font-size: 28rpx;
      font-weight: 600;
      color: #1d2129;
    }

    .quick-desc {
      font-size: 24rpx;
      color: #86909c;
    }
  }
}

.bg-product {
  background: linear-gradient(135deg, #e54d42 0%, #ff8a73 100%);
}

.bg-community {
  background: linear-gradient(135deg, #ffb45b 0%, #ffe097 100%);
}

.bg-mine {
  background: linear-gradient(135deg, #7cc4ff 0%, #b5e1ff 100%);
}

.strategy-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;

  .strategy-card {
    padding: 28rpx;
    border-radius: 28rpx;
    background: #f8f9fb;
    display: flex;
    flex-direction: column;
    gap: 16rpx;

    .strategy-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .strategy-icon {
      width: 72rpx;
      height: 72rpx;
      border-radius: 24rpx;
      background: rgba(229, 77, 66, 0.12);
      color: #e54d42;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
    }

    .strategy-tag {
      font-size: 24rpx;
      color: #ff7b6b;
      background: rgba(255, 138, 115, 0.16);
      border-radius: 999rpx;
      padding: 6rpx 16rpx;
    }

    .strategy-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #1d2129;
      line-height: 1.4;
    }

    .strategy-desc {
      font-size: 24rpx;
      color: #4e5969;
      line-height: 1.6;
    }

    .strategy-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 24rpx;
      color: #86909c;
    }

    .strategy-change {
      font-size: 26rpx;
      font-weight: 600;
    }
  }
}

.post-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;

  .post-card {
    padding: 28rpx;
    border-radius: 28rpx;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, #fff 100%);
    box-shadow: 0 12rpx 36rpx rgba(229, 77, 66, 0.06);
    display: flex;
    flex-direction: column;
    gap: 12rpx;

    .post-top {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .post-rank {
        font-size: 28rpx;
        font-weight: 600;
        color: #e54d42;
      }

      .post-tag {
        font-size: 22rpx;
        padding: 6rpx 16rpx;
        border-radius: 999rpx;
        background: rgba(229, 77, 66, 0.12);
        color: #e54d42;
      }
    }

    .post-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #1d2129;
      line-height: 1.5;
    }

    .post-summary {
      font-size: 24rpx;
      color: #4e5969;
      line-height: 1.6;
    }

    .post-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 24rpx;
      color: #86909c;

      .post-heat {
        display: flex;
        align-items: center;
        gap: 8rpx;
        color: #e54d42;
      }
    }
  }
}

.service-card {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 24rpx;
  border-radius: 28rpx;
  background: #f8f9fb;
  & + .service-card {
    margin-top: 24rpx;
  }

  .service-icon {
    width: 88rpx;
    height: 88rpx;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .service-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8rpx;

    .service-title {
      font-size: 30rpx;
      font-weight: 600;
      color: #1d2129;
    }

    .service-desc {
      font-size: 24rpx;
      color: #4e5969;
      line-height: 1.6;
    }
  }

  .service-link {
    font-size: 26rpx;
    color: #e54d42;
  }
}

.up {
  color: #19be6b;
}

.down {
  color: #fa5151;
}

.flat {
  color: #ffb400;
}
